<template>
	<m-layout :title="layoutTitle" gap="0 24">
		<m-block gap="26 34" spa="76 0 0 0" radius="100" bgColor="#F6F6F6">
			<view class="flex">
				<m-icon v-if="type==2" type="icon-youxiang" class="pr-16"></m-icon>
				<m-icon v-if="type==1" type="icon-shouji" class="pr-16"></m-icon>
				<input type="text" v-model="val" :placeholder="placeholder" placeholder-class="from-item-pcs" :disabled="disabled"/>
			</view>
		</m-block>
		<m-block gap="26 34" spa="34 0 0 0" radius="100" bgColor="#F6F6F6">
			<view class="flex-between">
				<view class="flex-between">
					<m-icon type="icon-yanzhengma2" class="pr-16"></m-icon>
					<input type="text" v-model="code" placeholder="请输入验证码" placeholder-class="from-item-pcs" />
				</view>
				<m-button @click="SendCodeFn" :loading="codeLoading" type="hollow" size="small" class="hq">
					<text v-if="timer<=0">发送验证码</text>
					<text v-else>{{timer}}s</text>
				</m-button>
			</view>
		</m-block>

		<view style="margin-top: 60rpx;margin-bottom: 53rpx;">
			<m-button @click="sthimt">确定</m-button>
		</view>
	</m-layout>
</template>

<script>
	import { email, mobile } from '@/libs/fn/verify.js' // 引入验证工具库
	import { SendCode_Phone, SendCode_Mail } from "@/api/Ctrls.js" // 引入公用接口库
	import { BindEmaill, BindPhone } from "@/api/Users.js" // 引入接口     
	import { mapState, mapActions } from 'vuex';
	export default {
		data() {
			return {
				disabled:false,
				val: "", // 手机号或者邮箱
				code: "", // 验证码
				type: 1,
				layoutTitle: "编辑",
				placeholder: "请输入手机号",
				timeObj: '',
				timer: 0,
				codeLoading: false,
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userinfo
			})
		},
		onLoad(option) {
			console.log(option);
			uni.setNavigationBarTitle({
				title: option.title
			});
			this.layoutTitle = option.title;
			this.type = option.type;
			if (option.type == 1) {
				this.placeholder = "请输入手机号"
			} else if (option.type == 2) {
				this.placeholder = "请输入邮箱"
			}
			this.val = option.val || '';
			// this.disabled=option.val?true:false
		},
		watch: {
			timer(val) {
				if (val <= 0) {
					this.timer = 0;
					clearInterval(this.timeObj)
				}
			}
		},
		methods: {
			///////////////////////////////////// 点击事件 ////////////////////////////////////////
			// 提交
			sthimt() {
				if (this.type == 1) {
					this.BindPhone();
				} else if (this.type == 2) {
					this.BindEmaill();
				}
			},
			///////////////////////////////////// 网络请求 ////////////////////////////////////////
			// 发送验证码
			async SendCodeFn() {
				if (this.timer > 0) return // 如果倒计时为结束，不执行发送验证码
				if ((this.type == 1 && !mobile(this.val))) { // 是否手机
					return this.Toast(this.placeholder);
				}
				this.codeLoading = true;
				let success = this.type == 2 ? await SendCode_Mail({
					username: this.val,
				}) : await SendCode_Phone({
					phone: this.val,
				})
				this.codeLoading = false;
				if (success) {
					this.timer = 60;
					this.timeObj = setInterval(() => {
						this.timer--
					}, 1000)
				}
			},
			// 绑定手机号
			async BindPhone() {
				if (!mobile(this.val)) { // 是否手机
					return this.Toast('请输入正确的手机号');
				}
				if (!this.code) {
					this.Toast('请输入验证码');
					return
				}
				const { success, msg, data } = await BindPhone({
					phone: this.val,
					code: this.code
				})
				this.Toast(msg)
				if (success) return this.Jump()
			},
			// 绑定邮箱
			async BindEmaill() {
				if (!email(this.val)) { // 是否邮箱
					return this.Toast('请输入正确的邮箱');
				}
				if (!this.code) {
					this.Toast('请输入验证码');
					return
				}
				const { success, msg, data } = await BindEmaill({
					emaill: this.val,
					code: this.code
				})
				this.Toast(msg)
				if (success) return this.Jump()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.from-item-pcs {
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #CCCCCC;
	}

	.hq {
		border-radius: 100rpx;
		padding: 9rpx 20rpx;
		border-color: linear-gradient(270deg, #00CC92 0%, #38cc1e 100%);
		color: #887DFF;
	}
</style>